<%@ page contentType="text/html; charset=UTF-8" %>
<%@ include file="/include.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Locate For Me</title>
    <link charset="utf-8" title="no title" media="screen" type="text/css" href="script/css/style.css" rel="stylesheet"/>
    <link charset="utf-8" title="no title" media="screen" type="text/css" href="script/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet"/>
    <script type="text/javascript" src="script/gears_init.js"></script>
    <script type="text/javascript" src="script/Locator.js"></script>
    <script type="text/javascript" src="script/jquery-1.4.1.js"></script>
    <script type="text/javascript" src="script/jquery-ui-1.7.2.custom.min.js"></script>
    <script src="http://www.google.com/jsapi?key=ABQIAAAAcIo5LeHMmm2K3kKI25TdORTviV3hIhYIgtgZ_TTKTf2g2rNZORSvdD_UErc3M-fKKnXnJUEftPBxdQ" type="text/javascript"></script>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAcIo5LeHMmm2K3kKI25TdORTviV3hIhYIgtgZ_TTKTf2g2rNZORSvdD_UErc3M-fKKnXnJUEftPBxdQ&sensor=true"
            type="text/javascript"></script>
    <script type="text/javascript" src="script/fancybox/jquery.fancybox-1.3.0.pack.js"></script>
	<link rel="stylesheet" href="script/fancybox/jquery.fancybox-1.3.0.css" type="text/css" media="screen">
    <script type="text/javascript" src="script/fancybox/jquery.easing-1.3.pack.js"></script>
    <script type="text/javascript" src="script/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>
    <script type="text/javascript" src="script/jquery.form.js"></script>
        
    <script type="text/javascript">
		var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
		document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
		</script>
		<script type="text/javascript">
		try {
		var pageTracker = _gat._getTracker("UA-12857821-3");
		pageTracker._trackPageview();
		} catch(err) {}
	</script>
  </head>
  <body>
    
    
         	
    <c:forEach items="${userSearches}" var="keyword" varStatus="counter">		   
	   <input type="hidden" name="userSearches" value="${keyword}"></input>		    		    
	</c:forEach>
	
    <div id="googleGearDialog" title="Warning" style="display:none;">
		  <p>We need <b>Google Gears</b> to detect your location. 
	      <b>Google Gears</b> is an open source project that enables more powerful web applications, by adding new features to your web browser.</p>      
	      <p>We can still roughly detect where you are without <b>Google Gears</b>. Close this dialog window to proceed</p> <b><i>or better yet,</i></b>
	      <p>Visit <a href="http://gears.google.com/" target="_blank">Google Gear</a> to install it in your browser.</p> 
    </div>

    <div id="changeLocWarn" title="Warning" style="display:none;">
    	We are unable to locate your address
    </div>
    
	<div id="searchWarn" title="Search Warning" style="display:none;">
		<p>The search term is already displayed</p>
	</div>

	<div id="about" title="About" style="display:none;">
		Locate for me is an experimental website that uses Google Gear, Google Maps, Google Search, and Google Client Location API to detect user location. 
		Google Gear itself is still under development release and not meant for production use. As such there might be some glitches on this website as Google
		is improving Google Gear.
		<p>Locate for me is still under a beta release. You can create your own profile containing your search result and share it 
		among your friends over the net in the future.I intend to incorporate some 'social' feature into this website.
		It will be fun to have a one stop website where we can see real time stream of data about what
		people are saying about a certain place or event. 
		</p>
		<p>
		This website will not capture your location nor share it with any 3rd party. Locate for me
		will only capture your approximate coordinate to plot your where about on Google Map.
		</p>
		Locate-for-me by  <a href="http://zfranciscus.wordpress.com" target="_blank" rel="cc:attributionURL">
		Zainul Franciscus</a> is licensed under a <a rel="license" target="_blank" href="http://creativecommons.org/licenses/by-nc-sa/3.0/nz/">
	    Creative Commons Attribution-Non-Commercial-Share Alike 3.0 New Zealand License</a>.<br/><br/>	  
	    <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/nz/">
	  		<img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-nc-sa/3.0/nz/88x31.png" />
	    </a><br/>
		
	</div>
	
	
	
    <c:if  test="${!empty foursquareErr}">
    	<div id="foursquareErr" title="Warning" style="display:none;">		
		Foursquare is having problem processing our request. Please try logging in to foursquare again.
		</div>
    </c:if>
    
    <div id="add" class="menu">		
	    <a id="aboutLink" class="bar" href="#">About</a>
	    <c:if  test="${empty loggedIn}">
	    	<a id="foursquareLogin" class="bar" href="doOAuth.do">Login to Foursquare</a>
	    </c:if>	
	    
	    <c:if  test="${!empty loggedIn}">	    
	    	<a id="tipsBtn" class="bar" href="#">Show Tips</a>
	    	<a id="removeTip" class="bar" href="#">Remove Tips</a>
	    </c:if>	
	        
		<input type="text" id="keyword" class="default-value searchField" value="Type a place of interest. e.g: Cafe"/>
		<div id="addPlace" class="btn locateformeBtn">Locate for Me</div>
    </div>

    <div id="mapContainer">
	    <div id="mapArea">
	    	<h1><span id="title">We think you are around this area:</span></h1>
	    	<div id="map_canvas"></div>
	    </div>a
		
		<div id="mapOption" class="menu">
			<input type="text" id="changeLoc" class="default-value searchField" value="Type a new location"/>
			<div  id="changeLocBtn" class="btn changeLocBtn">Change My Location</div>
			<div id="userPosition" class="btn">Show My Location</div> 								
		</div>
		
		
	</div>
	
    <span id="nearby"><h1>Nearby Places</h1></span>

    <div id="searchContainer"></div>
    
    <div class="userSearch" title="" style="display:none"></div>
    
    <div id="tipsLoading" title="Retrieving Tips" class='ui-dialog ui-widget ui-widget-content ui-corner-all  ui-draggable popUp' role='dialog' aria-labelledby='ui-dialog-title-dialog' style="display:none;">
	
	    <div id="checkinTitleBar" class='ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix' unselectable='on' style='-moz-user-select: none;'>
		    <span class='ui-dialog-title' id='ui-dialog-title-dialog' unselectable='on' style='-moz-user-select: none;'>Retrieving Tips</span>		    		    		   
		</div>		
		<p style="text-align:center;">Retrieving Tips from Four Square</p>
		<img src="/img/ajax-loader.gif"></img>		
	</div>
	
    	    
   <div id="checkin" title="Foursquare Check In" class='ui-dialog ui-widget ui-widget-content ui-corner-all  ui-draggable popUp' role='dialog' aria-labelledby='ui-dialog-title-dialog' style="display:none">
	    <div id="checkinTitleBar" class='ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix' unselectable='on' style='-moz-user-select: none;'>
		    <span class='ui-dialog-title' id='ui-dialog-title-dialog' unselectable='on' style='-moz-user-select: none;'>Check In to Foursquare</span>
		    		    		   
			<a id="checkinCloseBtn" href='#' class='ui-dialog-titlebar-close ui-corner-all' role='button' unselectable='on' style='-moz-user-select: none;'> 
				<span class='ui-icon ui-icon-closethick'  unselectable='on' style='-moz-user-select: none;'></span>
			</a>
			
		</div>
			
    	<form:form commandName="foursquareForm" action="checkin.do">
    	
		    <form:hidden path="geolat" id="geolat"></form:hidden>
		    <form:hidden path="geolong" id="geolong"></form:hidden>	 
		    <form:hidden path="token" id="token"></form:hidden>
		    <form:hidden path="secretToken" id="secretToken"></form:hidden>
		    <form:hidden path="pinCode" id="pinCode"></form:hidden>
		    <form:hidden path="venueName" id="venueName"></form:hidden>
		    <p><span id="checkinMsg"></span></p>
		    
		    Your Shout(Optional): <form:input path="shout" id="shout"  maxlength="140" cssClass="text ui-widget-content ui-corner-all"></form:input>		    		   
	  		<input type="submit" value="Check In" id="checkinSubmit"></input>  
	  			
    	</form:form> 
        
        <div id="ajaxLoader" style="display:none">
        	Checking in to foursquare ...</br>
        	<img src="/img/ajax-loader.gif"/>
        </div>
        <div id="responseMsg"></div>        
    </div>
    
  </body>
  <script type="text/javascript">
  
    	google.load('search', '1');
    
		$(function() {
									
		   var dialogMgr = new DialogManager();
		   var mapMgr = new MapManager();		       
		   var searchMgr = new SearchManager(mapMgr);	 
			
	       var isGearInstalled = $(mapMgr).isGearInstalled();
	        
	       if(!isGearInstalled)
	       {
				$(dialogMgr).showDialog({id: "googleGearDialog", height: "350", width: "500"});
	  	   }
	
		  var active_color = '#000000'; // Colour of user provided text
		  var inactive_color = '#505050'; // Colour of default text
	  	    	  
		  $("input.default-value").css("color", inactive_color);
		  	  
		  var default_values = new Array();
		  default_values["#keyword"] = "Specify a place of interest. e.g: Cafe";
		  default_values["#changeLoc"] = "Specify your address"; 
			  
		  $("input.default-value").focus(function() {
			    if (!default_values[this.id]) {
			      default_values[this.id] = this.value;
			    }
			    if (this.value == default_values[this.id]) {
			      this.value = '';
			      this.style.color = active_color;
			    }
			    $(this).blur(function() {
			      if (this.value == '') {
			        this.style.color = inactive_color;
			        this.value = default_values[this.id];
			      }
			    });
		  });
		  
		  
		  $("#addPlace").click(function(){
				var keyword = $("#keyword").attr("value");
				$(searchMgr).searchFor(keyword);		
		  });

		  $("#aboutLink").click(function(){
				$(dialogMgr).showDialog({id: "about", height: "350", width:"700"});
		  });

		  $("#changeLocBtn").click(function(){
			  var address = $("#changeLoc").attr("value");
			  $(mapMgr).changeUserLocation(address);
		  });
		  
		  var userAgent = navigator.userAgent;

		  if(!(userAgent.indexOf("Ubuntu/9.10 (karmic)") > -1 && userAgent.indexOf("Firefox"))){
	
		  	$.each($("input[name='userSearches']"),function(index, userSearch){			  
				  $(searchMgr).searchFor($(userSearch).attr("value"));
			});
			  
		  }

		  $("#userPosition").click(function(){
			  $(searchMgr).panToUserPos();
		  });

		 
		  
		  $("#foursquareLogin").click(function(){
			  var searchBoxes = $(".searchBox");

			  var searchKeywords = "";

			  jQuery.each(searchBoxes,function(index, searchBox){				  
				  searchKeywords += $(searchBox).attr("title") + ",";				  
			  });

			
			 $(this).attr("href","doOAuth.do?userSearches=" + searchKeywords);
			   			 

		  })
		  
		

		  $("#checkinSubmit").click(function(){
			  $("#ajaxLoader").show();

		  });
		  
		  var dialogMgr = new DialogManager();
		  $(dialogMgr).setDraggable({searchBox: "#checkin"});
		  $("#checkinCloseBtn").click(function(){
			  $("#shout").val('');
			  $("#responseMsg").text('');
			  $("#checkin").hide();
			  $("#checkinMsg").text('');
		  });

		  $(dialogMgr).showDialog({id:"foursquareErr", height:"200", width:"400"});

		  $("#removeTip").click(function(){

			  $(mapMgr).removeMarkerByKeyword("foursquare");
		  });
		  
		  $("#tipsBtn").click(function(){

			  var userPosition = $(mapMgr).getUserPosition();
			  $("#geolat").attr("value",userPosition.latitude);
			  $("#geolong").attr("value",userPosition.longitude);
			  $("#foursquareForm").attr("action","tips.do");

			  var dialogWindow;
			  
			  $("#foursquareForm").ajaxForm({
				  beforeSend: function(){
				  				$("#tipsLoading").show();
				  			  },
				  success : function(data){
			  
				  		$("#ajaxLoader").hide(); 

				  		try
				  		{
				  			var json = jQuery.parseJSON(data);
				  			var tips = json.groups[0].tips;
				  			var result = [];

				  	    	jQuery.each(tips,function(index,tip){ 

				  	    		var venueName = tip.venue.name;
				  	    		var venueAddr = tip.venue.address;
				  	    		var userTips = tip.text;
				  	    		var lastName = tip.user.lastName;
				  	    		var firstName =  tip.user.firstname;
				  	    		var userName = "";
								var img = tip.user.photo;
								
				  	    		if(lastName != undefined && jQuery.trim(lastName).length > 0)
				  	    		{
				  	    			userName += lastName + ",";
				  	    		}

				  	    		if(firstName != undefined)
				  	    		{
				  	    			userName += firstName;
				  	    		}
				  	    						  	    				  	    	
					  	    	var venueInfo = "<div><b>"+ venueName +"</b><br/>" + venueAddr + "<br/>Tip:" + userTips + "<br/>"
					  	    	+ "By: " + userName + "<br/>" 
					  	    	+ "<img src='" + img + "'></img></div>";

					  	    	
				  	    		result.push({lat:tip.venue.geolat,lng:tip.venue.geolong,html:venueInfo});
				  	        });
				  	        
				  			$(mapMgr).overlay4Marker(result,"/img/Obelisk-icon.png",false,"foursquare");
				  			$("#tipsLoading").hide();
				  			
				  		}catch(e){
				  			$("#responseMsg").text(data);
				  		}
				  					  		
			  		}

		  	});
			  	
			  $("#foursquareForm").submit();
			  
		  });

		  $("#checkinSubmit").click(function(){

				$("#foursquareForm").ajaxForm({
					  
					  success : function(data){
				  
					  		$("#ajaxLoader").hide(); 
	
					  		try
					  		{
					  			var json = jQuery.parseJSON(data);
					  			$("#responseMsg").text(json.checkin.message);
					  			
					  		}catch(e){
					  			$("#responseMsg").text(data);
					  		}
					  					  		
				  		}
	
			  	  });
  
				
			  
		  });
		  
	    });

		
    </script>
    
    
	
</html>

